<template>
    <div class="header">
        <div style="float: right;padding-right: 30px;padding-top: 20px">
            <!-- 用户名下拉菜单 -->
            <el-dropdown class="user-name" trigger="hover" :hide-on-click="false" @command="handleCommand">
                        <span class="el-dropdown-link">
                            <i class="el-icon-user" style="font-size: 45px; font-weight: bold; "></i>
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item divided command="handleEdit" icon="el-icon-key">修改密码</el-dropdown-item>
                    <el-dropdown-item divided command="loginout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                    <el-dropdown-item divided command="systemexit" icon="el-icon-s-unfold">退出系统</el-dropdown-item>
                    <el-dropdown-item divided command="guanyu" icon="el-icon-paperclip">关于&nbsp;&nbsp;</el-dropdown-item>
                    <el-dropdown-item divided command="peizhi" icon="el-icon-setting">配置&nbsp;&nbsp;</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="logo">下肢主被动康复训练系统</div>
        <!--软件版本-->
        <el-dialog  title="软件版本" :visible.sync="rjVisible" width="50%">
        <!--    <div><img style="float: left;" src="../../assets/img/header.png"></div>-->
            <div style="width: 350px;
    line-height: 50px;font-size: x-large;">下肢主被动康复训练系统</div>
            <div style="font-size: x-large;margin-top: 10px">{{version}}</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">关 闭</el-button>
            </span>
        </el-dialog>
        <!--重置密码弹出框-->
        <el-dialog title="修改密码" :visible.sync="editVisible" width="60%">
            <el-form ref="editForm" :rules="editFormRules"  :model="editForm" label-width="100px">
                <el-form-item label="账号:" prop="userAcct">
                    <el-input disabled v-model="editForm.userAcct"></el-input>
                </el-form-item>
                <el-form-item label="原密码:" prop="userPwd">
                    <el-input type="password" v-model="editForm.userPwd"></el-input>
                </el-form-item>
                <el-form-item label="修改密码:" prop="userUPwd">
                    <el-input  type="password" v-model="editForm.userUPwd"></el-input>
                </el-form-item>
                <el-form-item label="确认修改密码:" prop="userQUPwd">
                    <el-input  type="password" v-model="editForm.userQUPwd"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="closeEdit">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import {doSignout,updatePwd,getVersion} from "../../api/login";
    export default {
        data: function() {
            return {
                editVisible:false,
                editForm:{},
                count:4,
                icons:["el-icon-odometer","el-icon-basketball",'el-icon-reading'],
                list:[{'isLink':true,url:"/assess"},{'isLink':true,url:"https://weibo.com/"},{'isLink':true,url:"https://weibo.com/mygroups?gid=3862264912296770"}],
                backgroundColor:'#6690ae',
                color:'#ffffff',
                position:'bottom-left',
                isOpenNewTab:true,
                someList:[],
                rjVisible:false,
                version:'',
                options:{
                    currentPage: 0,
                    thresholdDistance: 5000,
                    thresholdTime: 4000,
                    autoplay:3000,
                    //是否循环播放
                    loop:true,
                    centeredSlides: true,
                    // direction:'vertical', 方向横向
                    loopedSlides:1,
                    timingFunction: 'ease',
                    speed:7000
                },
                editFormRules: {
                    userPwd: [
                        { required: true, message: '请输入用户原密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},
                        { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
                        { min: 6, max: 6, message: '密码必须为6位字符', trigger: 'blur' }
                    ],
                    userUPwd:[
                        { required: true, message: '请输入修改后的密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},
                        { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
                        { min: 6, max: 6, message: '修改后的密码必须为6位字符', trigger: 'blur' }
                    ],
                    userQPwd: [
                        { required: true, message: '请输入确认修改后的密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},
                        { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
                        { min: 6, max: 6, message: '确认修改后的密码必须为6位字符', trigger: 'blur' }
                    ],
                },
            };
        },
        methods: {
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command == 'loginout') {//退出登录
                    // 二次确认退出登录
                    this.$confirm('确定要退出登录吗？', '提示', {
                        type: 'warning'
                    })
                        .then(() => {
                            //后台进行退出登录操作
                            doSignout({
                                userAcct: localStorage.getItem('ms_userAcct')
                            }).then(res => {
                                if (res.success==true){
                                    localStorage.removeItem('Authorization');
                                    localStorage.removeItem('ms_userAcct');
                                    this.$router.push('/login');
                                }
                            });
                        })
                        .catch(() => {
                            this.$message({
                                message:'已取消操作'
                            });
                        });
                }if (command == 'handleEdit') {//重置密码
                    this.editForm.userAcct=localStorage.getItem('ms_userAcct');
                    this.editVisible = true;
                }if(command == 'guanyu'){
                    this.rjVisible=true;
                    getVersion().then(res => {
                        if (res.success==true){
                            this.version=res.data;
                        }
                    })
                } else if(command == 'systemexit'){//退出系统
                    __winx.exit();
                }else if (command =='peizhi'){
                    this.$router.push('/hospital');
                }
            },
            closeEdit(){//关闭重置密码弹出框
                this.editVisible=false;
                this.editForm={};
            },
            saveEdit(){
                // validate 函数 表单验证
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        //判断修改密码与确认修改密码是否一致
                        if (this.editForm.userUPwd != this.editForm.userQUPwd) {//不一致
                            this.$message.error("请确认两次输入的修改密码是否一致？");
                        } else {//一致
                            //调用后台
                            updatePwd({
                                userAcct: this.editForm.userAcct,
                                oldPassword: this.editForm.userPwd,
                                newPassword: this.editForm.userQUPwd
                            }).then(res => {
                                if (res.success) {
                                    if (res.data == 1){
                                        this.editVisible = false;
                                        this.editForm = {};
                                        this.$message.success('重置成功请重新登录');
                                        localStorage.removeItem('ms_userAcct');
                                        this.$router.push('/login');
                                    } else {
                                        this.$message.error("重置失败");
                                    }
                                } else {
                                    this.$message.error(res.data);
                                }
                            });
                        }
                    }
                })
            },
            close(){
                this.rjVisible=false;
            },
        },
    };
</script>

<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 75px;
        font-size: 28px;
        color: #fff;
        background-color: #324157;
        /*background: linear-gradient(to top, #303143 0%, #dadcd5 100%);*/
    }
    .collapse-btn {
        float: left;
        background-color: #6690ae;
        /*background: linear-gradient(to top, #303143 0%,#dadcd5 100%);*/
    }
    .header .logo {
        margin-left: 300px;
        width: 400px;
        line-height: 80px;
    }
    .header-right {
        float: right;
        padding-right: 70px;
    }
    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
    }

    .btn-bell .el-icon-bell {
        color: #fff;
    }
    .user-name {
        margin-left: 16px;
    }
    cascader{
        margin-left: 10px;
    }
    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .el-dropdown-link {
        color: #fff;
        cursor: pointer;
    }
    .header-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

</style>
